<template>
  <div class="left-container">
      <p><a style="text-decoration:none"  @click="showD">新建攻略</a></p>
     
        <ul class="list">
            <li :key=item.id v-for="item in getStrategy" @click="showArticles(item.id)">
             {{item.name}}
            </li>
      </ul>
      <new-dialog :showDialog="showDialog" v-on:showTest="showTest" >
            
      </new-dialog>
  </div>
</template>
<script>
import NewDialog from './Dialog'
import {mapGetters} from 'vuex'
export default {
    data(){
        return{
            show: false
        }
    },
  components:{
      NewDialog
  },
  created(){
      this.$store.dispatch('getStrategy')
  },
  methods:{
      showD(){
         this.show = true;
      },
      showArticles(id){
         this.$store.dispatch('getArticles',id)
      },
      showTest(){
           this.show = false;
      }
  },
  computed:{
      strategy(){
          return this.$store.getters.getStrategy;
      },
      showDialog:function(){
          return this.show;
      },
      ...mapGetters({
          getStrategy:'getStrategy'
      })
  }
}
</script>
<style scoped>
   .left-container{
       width:200px;
       border-right: 1px solid #ddd;
   }

   .left-container p {
       width:100%;
       text-align: center;
       border-bottom: 1px solid #ddd;
       margin-top:0;
       margin-bottom: 0;
       height: 30px;
       line-height:30px;
       cursor:pointer;
   }
   .left-container .list{
       width:100%;
       margin-bottom: 0;
       padding-left: 0;
       margin-top: 0;
      
   }
   .left-container li{
       border-bottom: 1px solid #ddd;
       height: 50px;
       line-height: 50px;
       text-align: center;
       list-style-type:none;
         cursor:pointer;
   }
   .left-container li:hover{
       background-color:beige;
   }
</style>
